﻿<AntTitle Level="1">Checkbox</AntTitle>
<AntText>Checkbox component.</AntText>
<AntTitle Level="2">When To Use</AntTitle>
<AntParagraph>
    <ul>
        <li>Used for selecting multiple values from several options.</li>
        <li>If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.</li>
    </ul>
</AntParagraph>
<br />
<h2>Examples</h2>
<br />
<DemoCard>
    <Title>Basic</Title>
    <Description>Basic usage of checkbox.</Description>
    <Demo>
        <AntCheckbox>Checkbox</AntCheckbox>
    </Demo>
</DemoCard>
<br />

<DemoCard>
    <Title>Controlled Checkbox</Title>
    <Description>Communicated with other components.</Description>
    <Demo>
        <div style="margin-bottom: 20px">
            <AntCheckbox Checked="@isChecked" Disabled="@disabled" CheckedChange="@ToggleChecked">
                @($"{(isChecked ? "Check" : "Uncheck")}-{(disabled ? "Disable" : "Enable")}")
            </AntCheckbox>
        </div>
        <br />
        <AntButton Type="@AntButtonType.Primary" Size="small" @onclick="@ToggleChecked">@(isChecked ? "Check" : "Uncheck")</AntButton>
        <AntButton Type="@AntButtonType.Primary" Size="small" @onclick="@ToggleDisable">@(disabled ? "Disable" : "Enable")</AntButton>
    </Demo>
</DemoCard>
@code{
    bool isChecked = true;
    bool disabled = false;
    void ToggleChecked()
    {
        isChecked = !isChecked;
    }
    void ToggleDisable()
    {
        disabled = !disabled;
    }
}
<br />

<DemoCard>
    <Title>Check all</Title>
    <Description>
        <AntParagraph>The <AntText Code>indeterminate</AntText> property can help you to achieve a 'check all' effect.</AntParagraph>
    </Description>
    <Demo>
        <AntCheckbox Indeterminate="@indeterminate" Checked="@checkAll" CheckedChange="@CheckAllChanged">Check all</AntCheckbox>
        <AntDivider />
        <AntCheckboxGroup Options="@ckeckAllOptions" ValueChanged="@OnChanged"></AntCheckboxGroup>
    </Demo>
</DemoCard>
@code{

    static CheckBoxOption[] ckeckAllOptions = new CheckBoxOption[]{
        new CheckBoxOption{ Label="Apple",Value="Apple" ,Checked=true},
        new CheckBoxOption{ Label="Pear", Value="Pear" },
        new CheckBoxOption{ Label="Orange", Value="Orange",Checked=true },
    };

    void CheckAllChanged()
    {
        bool allChecked = checkAll;
        ckeckAllOptions.ForEach(o => o.Checked = !allChecked);
    }

    void OnChanged()
    {

    }

    bool indeterminate => ckeckAllOptions.Count(o => o.Checked) > 0 && ckeckAllOptions.Count(o => o.Checked) < ckeckAllOptions.Count();

    bool checkAll => ckeckAllOptions.All(o => o.Checked);

}
<br />

<DemoCard>
    <Title>Disabled</Title>
    <Description>Disabled checkbox.</Description>
    <Demo>
        <div>
            <AntCheckbox Disabled></AntCheckbox>
            <br />
            <AntCheckbox Checked Disabled></AntCheckbox>
        </div>
    </Demo>
</DemoCard>
<br />

<DemoCard>
    <Title>Checkbox Group</Title>
    <Description>Generate a group of checkboxes from an array.</Description>
    <Demo>
        <AntCheckboxGroup Options="plainOptions" @bind-Value="@checkValue1"></AntCheckboxGroup>
        <br />
        <AntCheckboxGroup Options="options" @bind-Value="@checkValue2"></AntCheckboxGroup>
        <br />
        <AntCheckboxGroup Options="optionsWithDisabled" Disabled @bind-Value="@checkValue1"></AntCheckboxGroup>
    </Demo>
</DemoCard>
@code{

    CheckBoxOption[] plainOptions = new CheckBoxOption[]{
        new CheckBoxOption{ Label="Apple",Value="Apple" },
        new CheckBoxOption{Label="Pear", Value="Pear"},
        new CheckBoxOption{ Label="Orange", Value="Orange" },
    };
    CheckBoxOption[] options = new CheckBoxOption[]{
        new CheckBoxOption{ Label="Apple",Value="Apple" },
        new CheckBoxOption{ Label="Pear", Value="Pear"},
        new CheckBoxOption{ Label="Orange", Value="Orange" },
    };

    CheckBoxOption[] optionsWithDisabled = new CheckBoxOption[] {
        new CheckBoxOption{ Label ="Apple", Value="Apple" },
        new CheckBoxOption{ Label = "Pear", Value="Pear" },
        new CheckBoxOption{  Label = "Orange",Value= "Orange", Disabled = false },

    };

    string[] checkValue1 = { "Apple" };
    string[] checkValue2 = { "Pear" };
}
<br />

<DemoCard>
    <Title>Use with Grid</Title>
    <Description>We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.</Description>
    <Demo>
        <AntCheckboxGroup>
            <AntRow>
                <AntCol Span="8">
                    <AntCheckbox>A</AntCheckbox>
                </AntCol>
                <AntCol Span="8">
                    <AntCheckbox>B</AntCheckbox>
                </AntCol>
                <AntCol Span="8">
                    <AntCheckbox>C</AntCheckbox>
                </AntCol>
                <AntCol Span="8">
                    <AntCheckbox>D</AntCheckbox>
                </AntCol>
                <AntCol Span="8">
                    <AntCheckbox>E</AntCheckbox>
                </AntCol>
            </AntRow>
        </AntCheckboxGroup>
    </Demo>
</DemoCard>